<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Peaks.js Demo Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="titles">
      <h1>Peaks.js</h1>
      <p>
        Peaks.js is a JavaScript library that allows you to display and
        interact with audio waveforms in the browser.
      </p>

      <h2>Demo pages</h2>
      <p>
        The following pages demonstrate various configuration options:
      </p>
      <p>
        <a href="/index.html">Precomputed Waveform Data</a> |
        <a href="/webaudio.html">Web Audio API</a> |
        <a href="/zoomable-waveform.html">Single Zoomable Waveform</a> |
        <a href="/overview-waveform.html">Single Fixed Waveform</a> |
        <a href="/cue-events.html">Cue Events</a> |
        <a href="/set-source.html">Changing the Media URL</a> |
        <a href="/multi-channel.html">Multi-Channel Waveform</a> |
        <a href="/custom-markers">Custom Point and Segment Markers</a> |
        <a href="/overlay-segments.html">Overlay Segments</a> |
        <a href="/external-player.html">External Audio Player</a> |
        Scrollbar
      </p>
      <h2>Demo: Scrollbar</h2>
      <p>
        This demo shows how to configure Peaks.js with a scrollbar.
      </p>
    </div>

    <div class="waveform-container">
      <div id="zoomview-container"></div>
      <div id="scrollbar-container"></div>
    </div>
    <div class="waveform-container">
      <div id="overview-container"></div>
    </div>

    <div id="demo-controls">
      <audio id="audio" controls="controls">
        <source src="/TOL_6min_720p_download.mp3" type="audio/mpeg">
        <source src="/TOL_6min_720p_download.ogg" type='audio/ogg; codecs="vorbis"'>
        Your browser does not support the audio element.
      </audio>

      <div id="controls">
        <div>
          <button data-action="zoom-in">Zoom in</button>
          <button data-action="zoom-out">Zoom out</button>
          <input type="text" id="seek-time" value="0.0">
          <button data-action="seek">Seek</button>
        </div>
        <div>
          <label for="mousewheel-mode">Mousewheel mode:</label>
          <select id="mousewheel-mode">
            <option value="none">None</option>
            <option value="scroll">Scroll</option>
          </select>
          <input type="checkbox" id="auto-scroll" checked>
          <label for="auto-scroll">Auto-scroll</label>
        </div>
        <div>
          <button data-action="resize-width">Resize width</button>
          <button data-action="resize-height">Resize height</button>
        </div>
      </div>
    </div>

    <script src="/peaks.js"></script>
    <script>
      (function(Peaks) {
        var options = {
          zoomview: {
            container: document.getElementById('zoomview-container'),
            playheadClickTolerance: 3
          },
          overview: {
            container: document.getElementById('overview-container')
          },
          scrollbar: {
            container: document.getElementById('scrollbar-container'),
            color: '#888',
            minWidth: 100
          },
          mediaElement: document.getElementById('audio'),
          dataUri: {
            arraybuffer: '/TOL_6min_720p_download.dat',
            json: '/TOL_6min_720p_download.json'
          },
          keyboard: true,
          pointMarkerColor: '#006eb0',
          showPlayheadTime: true,
          waveformCache: true,
          zoomLevels: [512, 1024, 2048, 4096]
        };

        Peaks.init(options, function(err, peaksInstance) {
          if (err) {
            console.error(err.message);
            return;
          }

          console.log("Peaks instance ready");

          document.querySelector('[data-action="zoom-in"]').addEventListener('click', function() {
            peaksInstance.zoom.zoomIn();
          });

          document.querySelector('[data-action="zoom-out"]').addEventListener('click', function() {
            peaksInstance.zoom.zoomOut();
          });

          document.querySelector('button[data-action="seek"]').addEventListener('click', function(event) {
            var time = document.getElementById('seek-time').value;
            var seconds = parseFloat(time);

            if (!Number.isNaN(seconds)) {
              peaksInstance.player.seek(seconds);
            }
          });

          document.getElementById('mousewheel-mode').addEventListener('change', function(event) {
            var mode = event.target.value;
            var view = peaksInstance.views.getView('zoomview');

            view.setWheelMode(mode);
          });

          document.getElementById('auto-scroll').addEventListener('change', function(event) {
            var view = peaksInstance.views.getView('zoomview');
            view.enableAutoScroll(event.target.checked);
          });

          document.querySelector('button[data-action="resize-width"]').addEventListener('click', function(event) {
            document.querySelectorAll('.waveform-container').forEach(function(container) {
              container.style.width = container.offsetWidth === 1000 ? "700px" : "1000px";
            });

            const zoomview = peaksInstance.views.getView('zoomview');

            if (zoomview) {
              zoomview.fitToContainer();
            }

            const scrollbar = peaksInstance.views.getScrollbar();

            if (scrollbar) {
              scrollbar.fitToContainer();
            }

            const overview = peaksInstance.views.getView('overview');

            if (overview) {
              overview.fitToContainer();
            }
          });

          document.querySelector('button[data-action="resize-height"]').addEventListener('click', function(event) {
            const zoomviewContainer = document.getElementById('zoomview-container');
            const overviewContainer = document.getElementById('overview-container');

            zoomviewContainer.style.height = zoomviewContainer.offsetHeight === 200 ? "300px" : "200px";
            overviewContainer.style.height = overviewContainer.offsetHeight === 200 ? "85px"  : "200px";

            const zoomview = peaksInstance.views.getView('zoomview');

            if (zoomview) {
              zoomview.fitToContainer();
            }

            const overview = peaksInstance.views.getView('overview');

            if (overview) {
              overview.fitToContainer();
            }
          });
        });
      })(peaks);
    </script>
  </body>
</html>
